<template>
  <div class="login-container flex">
    <div class="background"></div>
    <div class="login-form">
      <div class="form h-full">
        <div class="text-[24px] mb-2" style="color: #030303">
          {{ lang.logo }}
        </div>

        <a-form
          :model="formState"
          autocomplete="off"
          layout="vertical"
          size="large"
          @submit-success="onFinish"
        >
          <a-space direction="vertical" fill :size="16">
            <a-form-item field="username" :label="lang.username" :rules="[{ required: true }]">
              <a-input v-model="formState.username" />
            </a-form-item>

            <a-form-item
              field="password"
              :label="lang.password"
              required
              :rules="[{ required: true, message: 'required' }]"
            >
              <a-input-password v-model="formState.password" />
            </a-form-item>
            <a-button
              long
              html-type="submit"
              :loading="loading"
              size="large"
              type="primary"
              class="mt-4"
              :disabled="!formState.username || !formState.password"
            >
              {{ lang.login }}
            </a-button>
          </a-space>
        </a-form>
      </div>
    </div>
    <div v-if="mode !== 'en'" class="beian">
      <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备17118117号-3</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { login } from "@/api/service/user";
import { setProfile } from "@/api/service/user/utils";
import router from "@/router";
import { getToken, setToken } from "@/store/modules/user/utils";
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const mode = import.meta.env.VITE_LANG;
const isProduction = import.meta.env.VITE_APP_MODE === "development";
const route = useRoute();
const lang = ref({
  logo: "ESL管理系统",
  login: "登录",
  username: "用户名",
  password: "密码"
});

const zh = {
  logo: "ESL管理系统",
  login: "登录",
  username: "用户名",
  password: "密码"
};

const en = {
  logo: "ESL Management System",
  login: "Login",
  username: "Username",
  password: "Password"
};

if (mode === "zh") {
  lang.value = zh;
} else {
  lang.value = en;
}

const loading = ref(false);

const formState = ref<FormState>({
  username: "",
  password: "",
  remember: true
});
/* 开发环境不显示密码 */

if (!isProduction) {
  formState.value = {
    username: "",
    password: "",
    remember: true
  };
} else {
  formState.value = {
    username: "gz001",
    password: "430490",
    remember: true
  };
}

const onFinish = async () => {
  loading.value = true;
  try {
    const result = await login(formState.value.username, formState.value.password);

    if (result.code === 200) {
      setToken(result.data.token);
      await setProfile();
      window.location.href = "/#/home";
      window.location.reload();
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

onMounted(async () => {
  if (getToken()) {
    router.push("/home");
  }
});
</script>

<style lang="scss" scoped>
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("../../assets/image/background.webp");
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(90%);
  z-index: -1;
}

.login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  .login-form {
    background-color: white;
    backdrop-filter: blur(2px);
    margin: auto;
    padding: 40px;
    border-radius: 12px;
    height: 500px;
    box-shadow: 0 4px 20px #00368014;
  }

  .form {
    width: 400px;
  }

  .beian {
    position: fixed;
    bottom: 0;
    left: 0;
    background: black;

    text-align: center;
    width: 100%;

    a {
      color: white;
    }
  }
}
</style>
